<template>
  <!-- 孪生安全组件 -->
  <div class="TwinSafety-box">
    <div class="TwinSafety-box-title">
      <BoxTitle />
    </div>
    <div class="TwinSafety-box-content">
      <!-- 告警 -->
      <div class="box-content-item">
        <div class="item-gaojing"></div>
        <div class="item-title">告警</div>
        <div class="item-Num digiTal1">10</div>
        <div class="item-danwei">个</div>
      </div>
      <!-- 竖线 -->
      <div class="TwinOperation-center"></div>
      <!-- 预警 -->
      <div class="box-content-item">
        <div class="item-yvjing"></div>
        <div class="item-title">预警</div>
        <div class="item-Num digiTal1">10</div>
        <div class="item-danwei">MW</div>
      </div>
      <!-- 竖线 -->
      <div class="TwinOperation-center"></div>
      <!-- 故障停机 -->
      <div class="box-content-item">
        <div class="item-tingji"></div>
        <div class="item-title">故障停机</div>
        <div class="item-Num digiTal1">100</div>
        <div class="item-danwei">个</div>
      </div>
    </div>
    <div class="TwinSafety-title-left">
      <div class="BoxTitle-title-fangkuai"></div>
      <div class="BoxTitle-title-title">充放电曲线</div>
    </div>
    <div class="TwinSafety-Echarts-box">
      <secureEcharts />
    </div>
    <div class="TwinSafety-echarts1">
      <sanDecharts1 />
    </div>
    <div class="TwinSafety-echarts2">
      <sanDecharts2 />
    </div>
  </div>
</template>
<script setup>
import BoxTitle from "./BoxTitle.vue"
import secureEcharts from "@/view/Twinoperation/secureEcharts.vue"
import sanDecharts1 from "@/view/Twinoperation/sanDecharts1.vue"
import sanDecharts2 from "@/view/Twinoperation/sanDecharts2.vue"
</script>
<style scoped lang="less">
.TwinSafety-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/anquan/tanchuang_luanshenganquan.png") no-repeat
    center;
  background-size: 100% 100%;
  .TwinSafety-box-title {
    position: absolute;
    width: 100%;
    height: 88px;
    margin-top: 22px;
  }
  .TwinSafety-box-content {
    // background-color: red;
    position: absolute;
    width: 100%;
    height: 40px;
    top: 110px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .box-content-item {
      width: 124px;
      height: 40px;
      display: flex;
      align-items: center;
      .item-gaojing {
        width: 20px;
        height: 20px;
        background: url("@/assets/anquan/icon_gaojing.png") no-repeat center;
        background-size: 100% 100%;
      }
      .item-yvjing {
        width: 20px;
        height: 20px;
        background: url("@/assets/anquan/icon_yujing.png") no-repeat center;
        background-size: 100% 100%;
      }
      .item-tingji {
        width: 20px;
        height: 20px;
        background: url("@/assets/anquan/icon_guzhangtingji.png") no-repeat
          center;
        background-size: 100% 100%;
      }

      .item-title {
        width: 70px;
        font-size: 12px;
        color: #fff;
      }
      .item-Num {
        width: 50px;
        height: 40px;
        line-height: 40px;
        color: #fff;
        text-align: right;
        font-size: 20px;
      }
      .item-danwei {
        margin-left: 3px;
        font-size: 10px;
        color: #fff;
      }
    }
    .TwinOperation-center {
      width: 2px;
      height: 30px;
      background-color: #818c9d;
    }
  }
  .TwinSafety-title-left {
    position: absolute;
    top: 140px;
    left: 20px;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    .BoxTitle-title-fangkuai {
      width: 10px;
      height: 10px;
      background: url("@/assets/TwinSafety/icon_xiaobiaoti.png") no-repeat
        center;
      background-size: 120% 120%;
    }
    .BoxTitle-title-title {
      color: #fff;
      text-shadow: 2px 2px 2px #50729c;
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      width: 60px;
      white-space: nowrap;
    }
  }
  .TwinSafety-Echarts-box {
    width: 100%;
    height: 140px;
    position: absolute;
    top: 170px;
  }
  .TwinSafety-echarts1 {
    position: absolute;
    top: 333px;
    left: 14px;
    width: 222px;
    height: 125px;
    // background-color: red;
  }
  .TwinSafety-echarts2 {
    position: absolute;
    top: 333px;
    left: 252px;
    width: 222px;
    height: 125px;
    // background-color: red;
  }
}
</style>
